<template>
<uni-shadow-root class="partials-productList-productListDetail-productListDetail"><template name="productListDetail">
  <block v-if="relateBean.length != 0">
    <view v-for="(result,index) in (relateBean)" :key="result.index" class="product_items2" v-if="index<jsonData.count" :data-info="result" @click="tolinkUrl">
      <view class="img_block">
        <image mode="aspectFill" :src="(result.imagePath)+'?x-oss-process=style/preview'"></image>
        <view class="product_jifen_block" v-if="result.needJifen">需消耗
          <text class="product_jifen_text" :style="'color: '+(defaultColor)+';'">{{result.needJifen}}积分</text>
        </view>
        <view class="sold_out_block" v-if="result.stock<=0">售罄</view>
      </view>
      <view class="product_items2_view1">
        <text class="product_name">{{result.name}}</text>
        <text class="location_name" v-if="result.longitude>0">{{result.location}}</text>
        <text class="location_name" v-else>{{result.description}}</text>
        <view class="sale_item" :style="'border:1rpx solid '+(defaultColor)" v-if="result.itemSpecialSaleType!=0">
          <view class="sale_item_title" :style="'background:'+(defaultColor)">
            <text v-if="result.itemSpecialSaleType==1">满减</text>
            <text v-if="result.itemSpecialSaleType==2">买赠</text>
            <text v-if="result.itemSpecialSaleType==3">限购</text>
            <text v-if="result.itemSpecialSaleType==4">日限购</text>
            <text v-if="result.itemSpecialSaleType==5">周限购</text>
            <text v-if="result.itemSpecialSaleType==6">月限购</text>
            <text v-if="result.itemSpecialSaleType==7">活动限购</text>
            <text v-if="result.itemSpecialSaleType==8">会员特卖</text>
          </view>
          <view class="sale_item_value" v-if="result.itemSpecialSaleType==1" :style="'color:'+(defaultColor)">
            满<text>{{result.itemSpecialSaleValue1}}元</text>减<text>{{result.itemSpecialSaleValue2}}元</text>
          </view>
          <view class="sale_item_value" v-if="result.itemSpecialSaleType==2" :style="'color:'+(defaultColor)">
            买<text>{{result.itemSpecialSaleValue1}}</text>赠<text>{{result.itemSpecialSaleValue2}}</text>
          </view>
          <view class="sale_item_value" v-if="result.itemSpecialSaleType==3||result.itemSpecialSaleType==4||result.itemSpecialSaleType==5||result.itemSpecialSaleType==6||result.itemSpecialSaleType==7" :style="'color:'+(defaultColor)">
            限购<text>{{result.itemSpecialSaleValue1}}件</text>
          </view>
          <view class="sale_item_value" v-if="result.itemSpecialSaleType==8" :style="'color:'+(defaultColor)">
            只限<text>会员购买</text>
          </view>
        </view>
        <scroll-view class="tags_content" scroll-x v-else>
          <text v-for="(tags,index) in (result.tagArray)" :key="tags.index" class="tags_item" v-if="result.tagArray">{{tags}}</text>
        </scroll-view>
        <view class="product_price">
          <component-price-group :data="result"></component-price-group>
        </view>
      </view>
      <view class="to_car" v-if="jsonData.showCard==1" @click.stop.prevent="readyAddCar" :data-product="result">
        <text>加入购物车</text>
      </view>
    </view>
  </block>
    <block v-else>
      <view class="noproduct">
        <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120"></image>
        <text>没有相关产品</text>
      </view>
    </block>
</template></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'partials/productList/productListDetail/productListDetail'

Component({})

export default global['__wxComponents']['partials/productList/productListDetail/productListDetail']
</script>
<style platform="mp-weixin">
.tags_content::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
display:none ;
}
/*没有相关商品  */
.noproduct{
  width: 100%;
  height: 200rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.noproduct image{
  width: 150rpx;
  height: 150rpx;
  margin: 0 auto;
}
.noproduct text{
  font-size: 30rpx;
}
.ListDataContainer{
  display: flex;
  flex-direction: column;
  border-top: 1px solid #ddd;
  font-size: 1em;
}
.ListDataItem{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.8em;
  height: 6em;
  border-radius: 0.4em;
  margin-bottom: 0.8em;
  background: #fff;
}
.ListDataItemWord{
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
  margin-left:10px;
}
.ListDataItemWordName{
  height: 70rpx;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  font-size: 26rpx;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
}
.ListDataItemWord .word2 {
  font-size: 30rpx;
  color: red;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.Box{
  width: 100%;
  height: 60rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 50rpx;
}
.Box text{
  font-size: 30rpx;
  display: block;
  line-height: 50rpx;
  color: red;
}
.BoxRed{
  width: 100rpx;
  height: 40rpx;
  border-radius: 20rpx;
  text-align: center;
}
.Box .BoxRed text{
  font-size: 26rpx;
  display: block;
  line-height: 40rpx;
  margin-left: 0rpx;
}
.ListDataItemImage{
  width: 30%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.2em;
}
.ListDataItemImage image{
  width: 100%;
  height: 100%;
}
.product_items2{
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  min-height:120rpx; 
  position: relative;
}
.product_items2 image{
  width: 220rpx;
  height: 220rpx;
  border-radius: 20rpx
}
.product_items2 .product_items2_view1{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  margin-left: 20rpx;
  min-height:220rpx;
  width:470rpx;
}
.product_items2_view1 .tags_content{
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow-x:hidden;
  width:100%;
  height:50rpx;
  white-space: nowrap
}
.tags_item{
  border: 2rpx solid #eee;
  padding: 2rpx 12rpx;
  font-size: 22rpx;
  color: #888;
  margin-right: 10rpx;
  border-radius: 10rpx;
  white-space:nowrap;
  box-sizing: content-box;
  display:inline-block;
}
.location_name{
  color: #aaa;
  font-size: 24rpx;
  overflow:hidden; 
  text-overflow:ellipsis;
  white-space:nowrap; 
  width:100%;
}
.product_name{
  color: #555;
  font-size: 28rpx;
  font-weight: bold;
  overflow:hidden; 
  text-overflow:ellipsis;
  white-space:nowrap; 
  width:100%;
}
.product_price{
  margin-left: -6rpx;
  font-size: 38rpx;
  color: #ff0000;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}
.unitShow{
  color:#bbb;
  font-size:24rpx;
  margin-left:4rpx;
  letter-spacing:4rpx;
}
.tag_price{
  text-decoration:line-through;
  font-size: 24rpx;
  color:#bbb;
  margin-left: 6rpx;
}
.price{
  font-size: 38rpx;
  height:38rpx;
  line-height:38rpx;
}
.to_car{
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  bottom: 20rpx;
  right: 26rpx;
  border-radius: 24rpx;
  font-size: 20rpx;
  border: 1rpx solid #ff0000;
  color: #ff0000;
  padding: 6rpx 18rpx;
}
.sale_item{
  display: flex;
  align-items: center;
  flex-direction: row;
  font-size: 20rpx;
}
.sale_item_title{
  color: #fff;
  padding:4rpx 6rpx;
}
.sale_item_value{
  padding:4rpx 6rpx;
  margin-left:10rpx;
}
</style>